import styles from './index.module.less'
import Button from '@/components/button'
import { currUserRoles } from '@/store'
import { useRecoilValue } from 'recoil'
import { ROLE_STATUS_ENUM } from '@/constant'
import ModalApply from './modal-apply'
import { useState } from 'react'
import { REFUSED_CODE, BAN_CODE } from '@/constant'
import cm from 'classnames'

const Index = () => {
  const currentRole = useRecoilValue(currUserRoles)
  const [show, setShow] = useState(false)

  return (
    <div className={styles.main}>
      <p className={styles.title}>联盟伙伴 如何运作？</p>
      <img src="/images/apply.webp" className={styles.img} />
      {currentRole.current?.status === BAN_CODE && <Button className={cm(styles.btn, styles.red)}>已停用</Button>}
      {currentRole.current?.status === 2 && <Button className={styles.btn}>审核中</Button>}
      {[REFUSED_CODE, 1].includes(currentRole.current?.status) && (
        <Button className={cm(styles.btn, styles.apply)} onClick={() => setShow(true)}>
          立即申请
        </Button>
      )}
      {show && <ModalApply visible={show} role={currentRole.current} close={() => setShow(false)} />}
    </div>
  )
}

export default Index
